import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { registerMicroApps, start, initGlobalState } from 'qiankun'
const apps = [
  {
    name: 'vueApp', // 应用名字
    entry: '//localhost:10002', // 默认会加载这个html 解析里面的 js 动态执行 （子应用必须支持跨域）
    container: '#vue',
    activeRule: '/vue',
    props: { msg: '向子应用传值', id: 111 }
  },
  {
    name: 'reactApp',
    entry: '//localhost:10003', // 默认会加载这个html 解析里面的 js 动态执行 （子应用必须支持跨域）
    container: '#react',
    activeRule: '/react'
  }
]

const lifeCycles = {
  beforeLoad: [
    app => {
      console.log('[LifeCycle] before load', app)
    },
  ],
  beforeMount: [
    app => {
      console.log('[LifeCycle] before mount', app)
    },
  ],
  afterMount: [
    app => {
      console.log('[LifeCycle] after mount', app)
    },
  ],
  beforeUnmount: [
    app => {
      console.log('[LifeCycle] before unmount', app)
    },
  ],
  afterUnmount: [
    app => {
      console.log('[LifeCycle] after unmount', app)
    },
  ],
}

// 初始化 state
const { onGlobalStateChange, setGlobalState, offGlobalStateChange } = initGlobalState({
  msgBase: '主应用定义的global state',
})

onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log('%c 基座应用 onGlobalStateChange 最新数据', 'font-size: 18px; color: #FF0000', state, prev);
}, true)


registerMicroApps(apps, lifeCycles) // 注册应用
start({
  prefetch: false // 预加载
}) // 开启

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
